// Color Palette
$theme-color: #409EFF;
$theme-color-1: #409EFF;
$gray: #8e8e93;
$gray-1: #ededed;
$gray-2: #c8c9cc;
$gray-3: #646566;
$gray-4: #f8f8f8;
$gray-5: #383434;
$gray-6: #969799;
$gray-7: #ebedf0;
$gray-8: #EDEDED;
$gray-9: #F6F7FB;
$gray-10: #E4E4E4;
$gray-11: #999999;
$gray-12: #666666;
$gray-13: #F4F4F4;
$gray-14: #F7F7F7;
$gray-15: #E9E9F0;
$gray-16: #d9d9d9;
$white: #ffffff;
$white-1: #ffffff;
$black: #000;
$black-1: #333333;
$black-2: #323233;
$red: #ff0000;
$red-1: #f88383;
$green: #5AD8A5;

// font-size
$font-xs: 12px;
$font-sm: 14px;
$font-md: 16px;
$font-lg: 20px;

$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-weight-bold: 600;
$line-height-xs: 14px;
$line-height-sm: 18px;
$line-height-md: 20px;
$line-height-lg: 22px;

// Size
$size-xs: 10px;
$size-sm: 20px;

// Padding
// Padding
$padding-base: 8px;
$padding-xs: $padding-base * 2;
$padding-sm: $padding-base * 3;
$padding-md: $padding-base * 4;
$padding-lg: $padding-base * 6;
$padding-xl: $padding-base * 8;

// Margin
$margin-base: 8px;
$margin-xs: $margin-base * 2;
$margin-sm: $margin-base * 3;
$margin-md: $margin-base * 4;
$margin-lg: $margin-base * 6;
$margin-xl: $margin-base * 8;

// Border
$b-radius-xs: 5px;
$b-radius-sm: 8px;
$b-radius-md: 10px;
$b-radius: 50%;
$b-color: $gray-1;

$border-width-base: 1px;
$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 10px;
$border-radius-max: 999px;